@import '../_config.scss';

.menu_and_carousel {
  background-color: #f3f3f3;
  margin-bottom: 30px;

  ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  .container {
    .top-menu {
      display: flex;
      flex-flow: row nowrap;
      padding: 15px 0;
      font-size: 15px;

      li {
        a {
          padding: 0 15px;
          color: #222222;

          &:hover {
            color: $color-private;
          }
        }
      }
    }

    .category-menu {
      padding: 0;

      .menus{
        position: absolute;
        width: 100%;
        font-size: 15px;
        z-index: 999;

        .menus-tip {
          padding: 15px 20px;
          color: $color-default;
          background-color: $color-private;
          cursor: pointer;
          height: 52px;
        }

        .parent-menu {
          display: none;
          min-height: 451px;
          background-color: rgba(55, 52, 55, 0.8);

          > li {
            padding: 15px 20px;
            color: $color-default;
            cursor: pointer;

            .kid-menu {
              display: none;
              position: absolute;
              left: 100%;
              top: 51px;
              width: 300%;
              height: 89.9%;
              background-color: rgba(55, 52, 55, 0.8);
              ul{
                display: flex;
                flex-flow: row wrap;
                li{
                  padding: 17.5px 15px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  position: relative;

                  a{
                    color: $color-default;
                  }

                  &:not(:first-child)::before{
                    position: absolute;
                    top: 21px;
                    left: 0;
                    content: '';
                    height: 15px;
                    border-left: 1px solid $color-border;
                  }

                  &:hover{
                    a{
                      color: $color-private;
                    }
                  }
                }
              }
            }

            &:hover{
              color: $color-private;

              .kid-menu{
                display: inherit;
              }
            }
          }
        }

        &.active{
          .parent-menu{
            display: inherit;
          }
        }
      }
    }
  }
}
